<div class="component group-component">
    <div class="add-new-button-div">
        <div class="add-new-panel panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Add New</h3>
            </div>
            <div class="panel-body">
                <div class="add-button" onclick="addNewHandle()">
                </div>
            </div>
        </div>
    </div>
    <div class="add-group-div">
    </div>
    <div class="group-list">
    </div>
    <div class="templates">
        <div class="edit-group-panel panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title"></div>
            </div>
            <div class="panel-body">
                <div class="name-element edit-panel-element">
                    <div class="name-label edit-element-label">name:</div>
                    <input class="name-value edit-element-value form-control"/>
                </div>
                <div class="description-element edit-panel-element">
                    <div class="description-label edit-element-label">description:</div>
                    <textarea class="description-value edit-textarea-element-value form-control"/>
                </div>
                <button type="button" class="save-group-button btn btn-primary">
                    Save
                </button>
                <button type="button" class="cancel-group-button btn btn-success">
                    Cancel
                </button>
            </div>
        </div>


        <div class="role-panel">
            <div class="role-id-div">
            </div>
            <div class="role-name-div">
            </div>
            <div class="role-description-div">
            </div>
            <div class="delete-role-button normal-button" title="Delete role">
            </div>
        </div>
        <div class="search-role-panel">
            <input type="radio" class="search-role-id" name="search-role-id"/>
            <div class="role-name-div">
            </div>
            <div class="role-description-div">
            </div>
        </div>
        <div class="search-user-panel">
            <input type="radio" class="search-user-id" name="search-user-id"/>
            <div class="username-div">
            </div>
            <div class="name-div">
            </div>
        </div>
        <div class="user-panel">
            <div class="user-id-div">
            </div>
            <div class="username-div">
            </div>
            <div class="name-div">
            </div>
            <div class="delete-user-button normal-button" title="Delete user">
            </div>
        </div>
        <div class="group-panel panel panel-info">
            <div class="panel-heading">
                <div class="panel-title"></div>
                <div class="button-wrap">
                    <div class="edit-button"></div>
                    <div class="delete-button"></div>
                </div>
            </div>
            <div class="panel-body">
                <div class="id-element">
                    <div class="id-label body-element-label">id:</div>
                    <div class="id-value body-element-value"></div>
                </div>
                <div class="name-element">
                    <div class="name-label body-element-label">name:</div>
                    <div class="name-value body-element-value"></div>
                </div>
                <div class="description-element">
                    <div class="description-label body-element-label">description:</div>
                    <div class="description-value body-element-value"></div>
                </div>
                <div class="role-list-wrap">
                    <div class="role-list-label body-element-label">roles:</div>
                    <div class="role-list-button-wrap">
                        <div class="role-list-show-button" title="Show role list"></div>
                        <div class="add-role-button" title="Add role"></div>
                    </div>
                    <div class="add-role-panel panel-body">
                        <ul class="nav nav-tabs">
                            <li class="add-existing-role-tab active"><a href="#" data-toggle="tab">Add an existing role</a></li>
                            <li class="add-new-role-tab"><a href="#" data-toggle="tab">Add new role</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="add-existing-role tab-pane fade in active">
                                <div class="add-existing-role-panel panel panel-primary">
                                    <div class="search-wrap">
                                        <input type="text" class="search-role-input" placeholder="role name"/>
                                        <div class="search-button"></div>
                                    </div>
                                    <div class="search-role-list">
                                    </div>
                                </div>
                            </div>
                            <div class="add-new-role tab-pane fade">
                                <div class="add-new-role-panel panel panel-primary">
                                    <div class="name-element edit-panel-element">
                                        <div class="name-label edit-element-label">name:</div>
                                        <input class="name-value edit-element-value form-control"/>
                                    </div>
                                    <div class="description-element edit-panel-element">
                                        <div class="description-label edit-element-label">description:</div>
                                        <textarea class="description-value-textarea edit-element-value form-control"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="button-wrap">
                            <button type="button" class="ok-button btn btn-success">
                                OK
                            </button>
                            <button type="button" class="reset-button btn btn-info">
                                Reset
                            </button>
                            <button type="button" class="close-button btn btn-primary">
                                Close
                            </button>
                        </div>
                    </div>
                    <div class="role-list">
                    </div>
                </div>
                <div class="user-list-wrap">
                    <div class="user-list-label body-element-label">users:</div>
                    <div class="user-list-button-wrap">
                        <div class="user-list-show-button" title="Show user list"></div>
                        <div class="add-user-button" title="Add user"></div>
                    </div>
                    <div class="add-user-panel panel-body">
                        <ul class="nav nav-tabs">
                            <li class="add-existing-user-tab active"><a href="#" data-toggle="tab">Add an existing user</a></li>
                            <li class="add-new-user-tab"><a href="#" data-toggle="tab">Add new user</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="add-existing-user tab-pane fade in active">
                                <div class="add-existing-user-panel panel panel-primary">
                                    <div class="search-wrap">
                                        <input type="text" class="search-user-input" placeholder="username / name"/>
                                        <div class="search-button"></div>
                                    </div>
                                    <div class="search-user-list">
                                    </div>
                                </div>
                            </div>
                            <div class="add-new-user tab-pane fade">
                                <div class="add-new-user-panel panel panel-primary">
                                    <div class="name-element edit-panel-element">
                                        <div class="username-label edit-element-label">username:</div>
                                        <input class="username-value edit-element-value form-control"/>
                                    </div>
                                    <div class="name-element edit-panel-element">
                                        <div class="name-label edit-element-label">name:</div>
                                        <input class="name-value edit-element-value form-control"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="button-wrap">
                            <button type="button" class="ok-button btn btn-success">
                                OK
                            </button>
                            <button type="button" class="reset-button btn btn-info">
                                Reset
                            </button>
                            <button type="button" class="close-button btn btn-primary">
                                Close
                            </button>
                        </div>
                    </div>
                    <div class="user-list">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<link type="text/css" rel="stylesheet"
      href="/static/clientlibs/tattoo/authorize/component/group-component/css/group-component.css"/>
<script type="text/javascript"
        src="/static/clientlibs/tattoo/authorize/component/group-component/js/group-component.js"></script>